<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>progress</title>
</head>

<body>
    <button class="download">下载</button>进度：<span class="download-span"></span></br>
    <form role="form" class="form" onsubmit="return false;">
        <input id="file" type="file" class="form-control" />
        <button class="upload">上传</button>进度：<span class="upload-span"></span>
    </form>
    <script src="../src/ajax.js"></script>
    <script>
        var download = document.querySelector('.download');
        var upload = document.querySelector('.upload');
        var downloadSpan = document.querySelector('.download-span');
        var uploadSpan = document.querySelector('.upload-span');
        download.addEventListener('click', function (e) {
            Ajax({
                method: 'get',
                url: 'https://img.mukewang.com/5cc01a7b0001a33718720632.jpg',
                onDownloadProgress: function (e) {
                    downloadSpan.innerHTML = Math.floor(e.loaded * 1.0) / e.total;
                }
            })
        })
        upload.addEventListener('click', function (e) {
            var data = new FormData();
            var fileEl = document.getElementById('file');
            if (fileEl.files) {
                data.append('file', fileEl.files[0]);
                Ajax({
                    method: 'post',
                    data: data,
                    url: '/more/upload',
                    onUploadProgress: function (e) {
                        uploadSpan.innerHTML = Math.floor(e.loaded * 1.0) / e.total;
                    }
                })
            }
        })
    </script>
</body>

</html>